import { fetcher } from '@/src/utils/fetcher'
import dayjs from 'dayjs'
import { getTranslations } from 'next-intl/server'
import { cookies } from 'next/headers'
import { Link } from '@/src/navigation'

interface PageProps {
  params: {
    slug: string
  }
}

const Page: React.FC<PageProps> = async (props) => {
  const { params } = props
  const cookieStore = cookies()
  const [t, article] = await Promise.all([
    getTranslations('news'),
    fetcher<Article>(`/api/index/newsInfo?newsid=${params.slug}`, {
      cookieStore,
    }),
  ])

  return (
    <>
      <div className='h-[1.5625rem] lg:h-[2.5rem] 2xl:h-[3.75rem]' />
      <h2 className='text-[#333333] text-center text-[1rem] leading-[1.4rem] font-bold 2xl:text-[1.21875rem] 2xl:leading-[0.9375rem]'>
        {article.title || 'Unknown'}
      </h2>
      <div className='h-2 lg:h-3' />
      <small className='text-[#999999] block text-center text-[0.75rem] leading-[0.75rem] font-meidum'>
        {dayjs(article.qdcreatetime).format('YYYY-MM-DD HH:mm:ss') || 'Unknown'}
      </small>
      <div className='h-6 2xl:h-9' />
      <div dangerouslySetInnerHTML={{ __html: article.details }}></div>
      <div className='h-[1px] bg-[#E5E5E5] my-6 lg:my-5 2xl:my-[1.875rem]' />
      {article.s_list?.id && (
        <Link
          href={`/news-detail/${article.s_list?.id}`}
          className='flex text-[#333333] text-[0.875rem] leading-[1rem] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[0.84375rem] 2xl:leading-[1rem]'
        >
          <div>{t('pre')}：</div>
          <div>{article.s_list?.title || 'Unknown'}</div>
        </Link>
      )}
      <div className='h-3'></div>
      {article.x_list?.id && (
        <Link
          href={`/news-detail/${article.x_list?.id}`}
          className='flex text-[#333333] text-[0.875rem] leading-[1rem] font-medium lg:text-[0.75rem] lg:leading-[1rem] 2xl:text-[0.84375rem] 2xl:leading-[1rem]'
        >
          <div>{t('next')}：</div>
          <div>{article.x_list?.title || 'Unknown'}</div>
        </Link>
      )}
      <div className='h-10' />
    </>
  )
}

export default Page
